<template>
  <div class="vue-carousel2" @mouseenter="pauseOnHover && stopAutoplay()" @mouseleave="pauseOnHover && startAutoplay()">
    <div class="carousel-container" ref="container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
      <transition-group name="slide" tag="div" class="carousel-slides">
        <div 
          v-for="(slide, index) in slides" 
          :key="slide.id || `slide-${index}`"
          v-show="currentIndex === index" 
          class="carousel-slide"
        >
          <img :src="slide.image" :alt="slide.label || ''" class="carousel-image">
          <div v-if="slide.caption || slide.label" class="carousel-caption">
            <h3 v-if="slide.label">{{ slide.label }}</h3>
            <p v-if="slide.caption">{{ slide.caption }}</p>
          </div>
          <div v-if="slide.link" class="carousel-content">
            <a :href="slide.link" class="carousel-link"></a>
          </div>
        </div>
      </transition-group>
    </div>

    <div v-if="showControls && slides.length > 1" class="carousel-controls">
      <button @click="prev" class="carousel-control prev" :style="controlStyle">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
      </button>
      <button @click="next" class="carousel-control next" :style="controlStyle">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
      </button>
    </div>

    <div v-if="showIndicators && slides.length > 1" class="carousel-indicators">
      <button
        v-for="(slide, index) in slides"
        :key="slide.id || `slide-${index}`"
        @click="goToSlide(index)"
        :class="['carousel-indicator', { active: currentIndex === index }]"
        :style="indicatorStyle"
      ></button>
    </div>

    <div v-if="showPlayPause && slides.length > 1" class="carousel-play-pause">
      <button @click="toggleAutoplay" class="carousel-play-pause-btn">
        <svg v-if="isPlaying" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="6" y="4" width="4" height="16"></rect>
          <rect x="14" y="4" width="4" height="16"></rect>
        </svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="5 3 19 12 5 21 5 3"></polygon>
        </svg>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VueCarousel2',
  props: {
    slides: {
      type: Array,
      required: true,
      default: () => []
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 5000
    },
    pauseOnHover: {
      type: Boolean,
      default: true
    },
    showControls: {
      type: Boolean,
      default: true
    },
    showIndicators: {
      type: Boolean,
      default: true
    },
    showPlayPause: {
      type: Boolean,
      default: false
    },
    controlColor: {
      type: String,
      default: 'rgba(255, 255, 255, 0.5)'
    },
    activeIndicatorColor: {
      type: String,
      default: '#fff'
    },
    indicatorColor: {
      type: String,
      default: 'rgba(255, 255, 255, 0.5)'
    },
    transitionEffect: {
      type: String,
      default: 'slide', // 'slide', 'fade', 'zoom'
      validator: (value) => ['slide', 'fade', 'zoom'].includes(value)
    }
  },
  data() {
    return {
      currentIndex: 0,
      timer: null,
      isPlaying: this.autoplay,
      touchStartX: 0,
      touchEndX: 0
    }
  },
  computed: {
    controlStyle() {
      return {
        backgroundColor: this.controlColor
      }
    },
    indicatorStyle() {
      return {
        backgroundColor: this.indicatorColor
      }
    }
  },
  mounted() {
    if (this.autoplay) {
      this.startAutoplay()
    }
    // 监听窗口大小变化，调整轮播图大小
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  beforeDestroy() {
    this.stopAutoplay()
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    startAutoplay() {
      if (this.slides.length > 1) {
        this.isPlaying = true
        this.timer = setInterval(() => {
          this.next()
        }, this.interval)
      }
    },
    stopAutoplay() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
        this.isPlaying = false
      }
    },
    toggleAutoplay() {
      if (this.isPlaying) {
        this.stopAutoplay()
      } else {
        this.startAutoplay()
      }
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.slides.length
      this.$emit('slide-change', this.currentIndex)
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length
      this.$emit('slide-change', this.currentIndex)
    },
    goToSlide(index) {
      this.currentIndex = index
      this.$emit('slide-change', this.currentIndex)
    },
    handleResize() {
      // 可以在这里添加响应式调整逻辑
      const container = this.$refs.container
      if (container) {
        // 例如，根据容器宽度调整高度等
      }
    },
    handleTouchStart(e) {
      this.touchStartX = e.touches[0].clientX
      this.stopAutoplay()
    },
    handleTouchMove(e) {
      this.touchEndX = e.touches[0].clientX
    },
    handleTouchEnd() {
      const diff = this.touchStartX - this.touchEndX
      const threshold = 50 // 滑动阈值
      
      if (Math.abs(diff) > threshold) {
        if (diff > 0) {
          // 向左滑动，显示下一张
          this.next()
        } else {
          // 向右滑动，显示上一张
          this.prev()
        }
      }
      
      if (this.autoplay) {
        this.startAutoplay()
      }
    }
  }
}
</script>

<style scoped>
.vue-carousel2 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  padding: 15px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
}

.carousel-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
}

.carousel-control {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.carousel-control:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}

.carousel-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.carousel-indicator:hover {
  transform: scale(1.2);
}

.carousel-indicator.active {
  background: #fff;
  transform: scale(1.2);
}

.carousel-play-pause {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}

.carousel-play-pause-btn {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
  color: white;
}

.carousel-play-pause-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* 过渡效果 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.slide-enter {
  transform: translateX(100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .carousel-control {
    width: 30px;
    height: 30px;
  }
  
  .carousel-indicator {
    width: 10px;
    height: 10px;
  }
  
  .carousel-caption {
    padding: 10px;
    bottom: 50px;
  }
}
</style>